<template>
  <div class="learn-container">
    <SideMenu
      :items="menuItems"
      :active-index="activeIndex"
      @select="handleSelect"
    />
    <div class="main-content-test"><router-view></router-view></div>
  </div>
</template>

<script setup>
import SideMenu from "@/components/SideMenu.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const activeIndex = ref("0"); // 默认选中第一项

const menuItems = [
  { index: "0", icon: "HomeFilled", title: "选择课程" },
  { index: "1", icon: "Stamp", title: "我的证书" },
];

const handleSelect = (index) => {
  switch (index) {
    case "0":
      router.push("/training/index");
      break;
    case "1":
      router.push("/training/certificate");
      break;
  }
};

onMounted(() => {
  const route = router.currentRoute.value;
  if (route.path === "/training/index") {
    activeIndex.value = "0";
  } else if (route.path === "/training/certificate") {
    activeIndex.value = "1";
  }
});
</script>

<style scoped>
.learn-container {
  display: flex;
  border: solid 1px rgb(226, 226, 226);
}

.main-content-test {
  background-color: rgb(245, 245, 245);
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 80vh;
}
</style>
